<template>
	<view class="login_box">
		<view class="text_login">
			<!-- logo -->
			<image class="login_logo" src="../../static/image/logo1.png" alt="" />
			<!-- 表单区域 -->
			<view class="login_phone">
				<text>手机号</text>
				<input type="text" maxlength="11" v-model="phone" />
			</view>
			<view class="login_code">
				<text>验证码</text>
				<input type="text" maxlength="4" v-model="code" />
				<view hover-class="touchOpacity" @click="getCode">{{codeText}}</view>
			</view>

			<!-- 登录按钮 -->
			<view class="login_but" hover-class="touchOpacity">
				<text space="ensp" @click="toLogin">登 录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				code: '',
				codeText: '获取验证码',
				codeFlag: false
			}
		},
		methods: {
			// 登录
			async toLogin() {
				let phone = this.phone
				let code = this.code
				let newPhone = uni.getStorageSync('phone') || null
				let newCode = uni.getStorageSync('code') || null
				// 验证手机号
				if (phone != newPhone || newPhone == null || newPhone == '') {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					})
					return false
				}
				// 验证验证码
				if (code != newCode || newCode == null || newCode == '') {
					uni.showToast({
						title: '验证码错误',
						icon: 'none'
					})
					return false
				}
				// 登录
				let option = {
					url: '/api/smslogin',
					method: 'POST',
					data: {
						phone: phone
					}
				}
				console.log(option)
				let res = await this.$http(option)
				console.log(res);
				if (res.data.code == 200) {
					uni.setStorageSync('userInfo', res.data.list)
					uni.removeStorageSync('code')
					uni.removeStorageSync('phone')
					this.$store.commit('changeInfo', res.data.list)
					uni.showToast({
						title: res.data.msg,
						icon: 'success'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/mine/mine'
						})
					}, 2000)
				} else {
					uni.showToast({
						title: '登录失败',
						icon: 'error'
					})
				}
			},
			// 获取验证码
			async getCode() {
				if (this.codeFlag) {
					return true
				}
				let phone = this.phone
				// let res = /^1[3-9][0-9]$/
				// if (!res.test(phone)) {
				// 	uni.showToast({
				// 		title: '请输入正确的手机号',
				// 		icon: 'error'
				// 	})
				// 	return false
				// }
				this.codeFlag = true
				let res = await this.$http({
					url: '/api/sms',
					data: {
						phone
					}
				})
				if (res.data.code == 200) {
					console.log(res)
					uni.setStorageSync('code', res.data.list.code)
					uni.setStorageSync('phone', phone)
					let num = 10
					let timer = setInterval(() => {
						num--
						console.log(num)
						this.codeText = num + 's后重新获取'
						if (num < 1) {
							clearInterval(timer)
							num = 10
							this.codeText = '获取验证码'
						}
					}, 1000)
				} else {
					uni.showToast({
						title: '获取失败',
						icon: 'error'
					})
					this.codeFlag = false
				}
			}
		}
	}
</script>

<style>
	/* 引入样式 */
	@import url("@/static/css/textlogin.css");
</style>